<script lang="ts" setup>
import { ref } from 'vue';
import loginFormConfig from './config'
import logoIcon from '@/assets/icons/logo.svg'
import { useUserStore } from '@/store/modules/user'
import { formatDate } from '@/utils/lib/date';
import { useRouter } from 'vue-router'

const router = useRouter()

const userStore = useUserStore()

const formRef = ref()


const adminLogin = async() => {
  try {
    const instance: Record<string, any> = formRef?.value?.getFormRef();
    const res = await userStore.userLogin({
      account: instance.model.account,
      password: instance.model.password,
      login_time: formatDate(new Date()),
    });
    if (res?.data.code === 200) {
      await userStore.getInfo({
        user_id: instance.model.account
      })
      router.push({
        path: '/home/index'
      })
    }

  } catch (error) {
    return Promise.reject(error)
  }
}

</script>

<template>
  <div class="page">
    <div class="login-box">
      <div class="title-box">
        <img :src="logoIcon" alt="" class="img">
        <p class="title">Admin</p>
      </div>

      <div>
        <Form :config="loginFormConfig" ref="formRef" />
      </div>
      <n-space>
        <n-button v-debounce="adminLogin" type="info" class="btn">登录</n-button>
      </n-space>
    </div>
  </div>


</template>

<style lang="less" scoped>
@import "@/styles/mixin.less";

.page {
  height: 100vh;
  overflow: hidden;
  background-image: url('../../assets/images/login.svg');
  .flex(row, center, center);


  .login-box {
    width: 450px;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 7px;
    // background-color: #fff;
    .flex(column, center, center);

    .title-box {
      .flex(row, center, center);
      margin-bottom: 40px;
      // border: 1px solid #000;
      .title {

        // margin-bottom: 30px;
        font-size: 28px;
      }
      .img{
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
    }



    .btn {
      width: 280px;
      height: 40px;
    }
  }
}
</style>
